<template>
  <div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-select
            v-model="dataForm.merchantId"
            maxlength="128"
            show-word-limit
            filterable
            :placeholder="$t('appstore.application.mrchName')"
          >
            <el-option
              v-for="item in merchantList"
              :key="item.mrchId"
              :label="item.name"
              :value="item.mrchId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-input
            v-model="dataForm.memberNo"
            :placeholder="$t('modules.pass.member_no')"
            clearable
            @blur="() => (dataForm.memberNo = dataForm.memberNo.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.memberName"
            :placeholder="$t('modules.pass.member_name')"
            clearable
            @blur="() => (dataForm.memberName = dataForm.memberName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item> -->
        <!-- <el-form-item>
          <el-input
            v-model="dataForm.mobile"
            :placeholder="$t('modules.pass.mobile')"
            clearable
            @blur="() => (dataForm.mobile = dataForm.mobile.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item> -->
        <el-form-item>
          <el-input
            v-model="dataForm.sn"
            maxlength="32"
            show-word-limit
            :placeholder="$t('appstore.application.devSn')"
            clearable
            @blur="() => (dataForm.sn = dataForm.sn.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.status" clearable :placeholder="$t('common.status')">
            <el-option
              v-for="item in statusList"
              :key="item.code"
              :value="item.code"
              :label="$t(item.label)"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="searchPass">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe class="passTable">
        <!-- <el-table-column key="src" prop="src" :label="$t('modules.pass.thumbnail')">
          <template v-slot="scope"
            ><img src="./assets/pass.png" width="60px" style="margin: 8px 0px"
          /></template>
        </el-table-column> -->
        <el-table-column key="devSn" prop="devSn" :label="$t('common.card_sn')" width="200px"/>
        <el-table-column key="passSn" prop="passSn" :label="$t('modules.pass.serial_number')" />
        <el-table-column key="memberNo" prop="memberNo" :label="$t('modules.pass.member_no')" />
        <el-table-column
          key="mrchName"
          prop="mrchName"
          :label="$t('appstore.application.mrchName')"
        />
        <el-table-column
          key="memberPoints"
          prop="memberPoints"
          :label="$t('modules.pass.integral')"
        />
        <el-table-column
          key="memberLevelName"
          prop="memberLevelName"
          :label="$t('operator.lever')"
        />
        <el-table-column key="status" prop="status" :label="$t('operator.status')">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="info">
              {{ $t('modules.pass.not_add') }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small" type="success">
              {{ $t('modules.pass.add') }}
            </el-tag>
            <el-tag v-if="scope.row.status === 2" size="small" type="error">
              {{ $t('modules.pass.remove') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          key="receiveTime"
          prop="receiveTime"
          :label="$t('modules.pass.receive_time')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.receiveTime)">
              {{ dateFilter(scope.row.receiveTime) }}
              {{ scope.row.receiveTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column key="creTime" prop="creTime" :label="$t('common.create_time')">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="detailHandle(scope.row)">
                    <svg-icon icon-class="outlined-info-circle" />
                    {{ $t('common.detail') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { timeFilter, dateFilter } from '@/filters/index'
import TableColumnFilter from '@/components/page-setting/table-column-filter'
import { isAuth } from '@/utils'
import PageTitle from '@/components/PageTitle/index.vue'
import { getPassCenterList } from '@/api/pass-center'
import { getMerchantList } from '@/api/merchant'
export default {
  components: {
    Permissions,
    TableColumnFilter,
    PageTitle
  },
  data() {
    return {
      dataForm: {
        merchantId: '',
        memberNo: '',
        memberName: '',
        mobile: '',
        sn: '',
        status: ''
      },
      statusList: [
        {
          code: 0,
          label: 'modules.pass.not_add'
        },
        {
          code: 1,
          label: 'modules.pass.add'
        },
        {
          code: 2,
          label: 'modules.pass.remove'
        }
      ],
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: [],
      merchantList: []
    }
  },
  mounted() {
    this.getMerchant()
    this.getData()
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    currentChangeHandle(val) {
      this.pageNo = val
      this.getData()
    },
    getMerchant() {
      let params = {
        status: 1,
        pageNo: 1,
        pageSize: 999
      }
      getMerchantList(params)
        .then((res) => {
          this.merchantList = res.data
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    detailHandle(detail) {
      this.$router.push({ path: `/pass-center/pass-detail`, query: { id: detail.passInstanceId } })
    },
    searchPass() {
      this.pageNo = 1
      this.getData()
    },
    addPass() {},
    getData() {
      let params = {
        merchantId: this.dataForm.merchantId,
        memberNo: this.dataForm.memberNo,
        memberName: this.dataForm.memberName,
        mobile: this.dataForm.mobile,
        devSn: this.dataForm.sn,
        status: this.dataForm.status,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getPassCenterList(params)
        .then((res) => {
          this.dataList = res.data
          this.totalPage = res.rows
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>
<style>
:deep(.el-table__row) {
  height: 100px;
}
.passTable .cell {
  height: auto;
}
</style>
